<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>详情页面</title>
    <link rel="stylesheet" href="../css/base.min.css">
    <link rel="stylesheet" href="../css/details-page.min.css">
    <!-- bootstrap样式 -->
    <link rel="stylesheet" href="../css/bootstrap.css">
    <script src="../js/jquery-3.6.0.min.js"></script>
    <script src="../js/bootstrap.bundle.min.js"></script>
</head>

<body>
    <!-- 侧边悬浮导航栏 -->
    <div class="bar">
        <a href="shoppingcart.html" class="item">
            <span class="badge badge-light">0</span>
        </a>
        <a href="backsystem_home.html" class="item"></a>
        <a href="personalcenter.html" class="item"></a>
    </div>
    <!-- 头部header样式 -->
    <header class="container">
        <!-- 头部nav -->
        <div class="row">
            <div class="col-8 offset-2">
                <nav class="navbar navbar-expand-lg navbar-light">
                    <button class="navbar-toggler" type="button" data-toggle="collapse"
                        data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false"
                        aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
                        <a class="navbar-brand logo" href="#"><img src="../images/index_logo.png" alt=""></a>
                        <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
                        </ul>
                        <form class="form-inline my-2 my-lg-0">
                            <a href="login.html" class="login">登录</a>
                            <div class="border"></div>
                            <a href="register.html" class="register">注册</a>
                            <div class="input">
                                <input type="text" placeholder="热门搜索：千花花瓶">
                                <i class="search"></i>
                            </div>
                            <a href="#" class="nav-user"></a>
                            <a href="#" class="nav-code"></a>
                        </form>
                    </div>
                </nav>
            </div>

        </div>
        <!-- 导航栏 -->
        <div class="row">
            <div class="col-10 offset-1">
                <ul class="nav justify-content-center">
                    <li class="nav-item">
                        <a class="nav-link" href="index.html">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">所有商品</a>
                        <div class="sub-nav">
                            <ul>
                                <li>
                                    <img src="../images/sub_nav1.jpg" alt="">
                                    <span>浓情欧式</span>
                                </li>
                                <div class="division"></div>
                                <li>
                                    <img src="../images/sub_nav2.jpg" alt="">
                                    <span>浪漫美式</span>
                                </li>
                                <div class="division"></div>
                                <li>
                                    <img src="../images/sub_nav3.jpg" alt="">
                                    <span>雅致中式</span>
                                </li>
                                <div class="division"></div>
                                <li>
                                    <img src="../images/sub_nav4.jpg" alt="">
                                    <span>简约现代</span>
                                </li>
                                <div class="division"></div>
                                <li>
                                    <img src="../images/sub_nav5.jpg" alt="">
                                    <span>创意装饰</span>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="decorate.html">装饰摆件</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">布艺软饰</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="wall-decoration.html">墙式壁挂</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">蜡艺香薰</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">创意家居</a>
                    </li>
                </ul>
            </div>
        </div>
    </header>
    <!-- 面包屑导航栏 -->
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item home"><a href="#">首页</a></li>
            <li class="breadcrumb-item"><a href="#">装饰摆件</a></li>
            <li class="breadcrumb-item"><a href="#">干花花艺</a></li>
            <li class="breadcrumb-item activity" aria-="page">【最家】非洲菊仿真花干花</li>
        </ol>
    </nav>
    <!-- 中间内容部分 -->
    <main>
        <!-- 上面部分商品详情 -->
        <section>
            <aside>
                <div class="tab-content" id="myTabContent">
                    <div class="tab-pane fade show active" id="img1" role="tabpanel" aria-labelledby="img1-tab">
                        <img src="../images/details_img1.jpg" alt="">
                    </div>
                    <div class="tab-pane fade" id="img2" role="tabpanel" aria-labelledby="img2-tab">
                        <img src="../images/details_img4.jpg" alt="">
                    </div>
                    <div class="tab-pane fade" id="img3" role="tabpanel" aria-labelledby="img3-tab">
                        <img src="../images/details_img5.jpg" alt="">
                    </div>
                    <div class="tab-pane fade" id="img4" role="tabpanel" aria-labelledby="img4-tab">
                        <img src="../images/details_img2.jpg" alt="">
                    </div>
                </div>
                <div class="piclist">
                    <ul class="nav nav-tabs" id="myTab" role="tablist">
                        <li class="nav-item" role="presentation">
                            <a class="img-link active" id="img1-tab" data-toggle="tab" href="#img1" role="tab"
                                aria-controls="img1" aria-selected="true">
                                <img src="../images/details_img1.jpg" alt="">
                            </a>
                        </li>
                        <li class="nav-item" role="presentation">
                            <a class="img-link" id="img2-tab" data-toggle="tab" href="#img2" role="tab"
                                aria-controls="img2" aria-selected="false">
                                <img src="../images/details_img4.jpg" alt="">
                            </a>
                        </li>
                        <li class="nav-item" role="presentation">
                            <a class="img-link" id="img3-tab" data-toggle="tab" href="#img3" role="tab"
                                aria-controls="img3" aria-selected="false">
                                <img src="../images/details_img5.jpg" alt="">
                            </a>
                        </li>
                        <li class="nav-item" role="presentation">
                            <a class="img-link" id="img4-tab" data-toggle="tab" href="#img4" role="tab"
                                aria-controls="img4" aria-selected="false">
                                <img src="../images/details_img2.jpg" alt="">
                            </a>
                        </li>
                    </ul>

                </div>
            </aside>
            <article>
                <div class="details-title">【最家】非洲菊仿真花干花</div>
                <div class="details-des">【破损补寄】【适合放室内、卧室、书房、餐桌、办公室、客厅、电视柜等地方】【无理由退换货】【包邮】【白色现代简约花瓶】</div>
                <p class="details-price">￥59.90</p>
                <div class="colorclass">
                    颜色分类
                    <ul class="classlist">
                        <li class="item"><a href="javascript:;"><img src="../images/details_img1.jpg" alt=""></a></li>
                        <li class="item"><a href="javascript:;"><img src="../images/details_img1.jpg" alt=""></a></li>
                        <li class="item"><a href="javascript:;"><img src="../images/details_img1.jpg" alt=""></a></li>
                        <li class="item"><a href="javascript:;"><img src="../images/details_img1.jpg" alt=""></a></li>
                    </ul>
                </div>
                <span>数量 库存2096件</span>
                <div class="btns">
                    <button class="sub">-</button>
                    1
                    <button class="add">+</button>
                </div>
                <div class="buyoradd">
                    <button class="buying"><a href="order-page.html">立即购买</a></button>
                    <button class="addcart"><a href="shoppingcart.html">加入购物车</a></button>
                </div>
            </article>
        </section>
        <!-- 更多商品详情及评论 -->
        <section>
            <div class="scn-left">
                <nav>
                    <div class="nav nav-tabs" id="nav-tab" role="tablist">
                        <a class="nav-link active" id="nav-goodsdetails-tab" data-toggle="tab" href="#nav-goodsdetails"
                            role="tab" aria-controls="nav-goodsdetails" aria-selected="true">商品详情</a>
                        <a class="nav-link" id="nav-allevaluate-tab" data-toggle="tab" href="#nav-allevaluate"
                            role="tab" aria-controls="nav-allevaluate" aria-selected="false">所有评价</a>
                    </div>
                </nav>
                <div class="tab-content" id="nav-tabContent">
                    <div class="tab-pane fade show active" id="nav-goodsdetails" role="tabpanel"
                        aria-labelledby="nav-goodsdetails-tab">
                        <img src="../images/details_img2.jpg" alt="">
                        <img src="../images/details_img3.jpg" alt="">
                        <img src="../images/details_img4.jpg" alt="">
                        <img src="../images/details_img5.jpg" alt="">
                        <img src="../images/details_img6.jpg" alt="">
                        <img src="../images/details_img7.jpg" alt="">
                        <img src="../images/details_img8.jpg" alt="">
                    </div>
                    <div class="tab-pane fade" id="nav-allevaluate" role="tabpanel"
                        aria-labelledby="nav-allevaluate-tab">
                        <div class="allevaluate-item">
                            <i><img src="../images/details_icon1.jpg" alt=""></i>
                            <div class="describe">
                                <p class="netname">馨***呀</p>
                                <p>不好意思评价晚了，产品很好，价格比玻璃品便宜，没有我担心的杂色，发货快，包装号，全5分</p>
                                <div>
                                    <img src="../images/details_icon3.jpg" alt="">
                                    <img src="../images/details_icon4.jpg" alt="">
                                    <img src="../images/details_icon5.jpg" alt="">
                                    <img src="../images/details_icon6.jpg" alt="">
                                    <img src="../images/details_icon7.jpg" alt="">
                                </div>
                                <span class="date">2016年12月27日08:31 颜色分类：大中小三件套（不含花）</span>
                            </div>
                        </div>
                        <div class="allevaluate-item">
                            <i><img src="../images/details_icon2.jpg" alt=""></i>
                            <div class="describe">
                                <p class="netname">么***周</p>
                                <p>花瓶超级棒，我看图以为是光面的，收货发现是磨砂，但感觉也超有质感，很喜欢。磨砂上面还有点纹路，不过觉得挺自然的，不影响美观。包装也很好，绝对不会磕碎碰坏，好评！</p>
                                <span class="date">2016年12月27日08:31 颜色分类：大中小三件套（不含花）</span>
                            </div>
                        </div>
                        <div class="allevaluate-item">
                            <i><img src="../images/details_icon1.jpg" alt=""></i>
                            <div class="describe">
                                <p class="netname">馨***呀</p>
                                <p>不好意思评价晚了，产品很好，价格比玻璃品便宜，没有我担心的杂色，发货快，包装号，全5分</p>
                                <div>
                                    <img src="../images/details_icon3.jpg" alt="">
                                    <img src="../images/details_icon4.jpg" alt="">
                                    <img src="../images/details_icon5.jpg" alt="">
                                    <img src="../images/details_icon6.jpg" alt="">
                                    <img src="../images/details_icon7.jpg" alt="">
                                </div>
                                <span class="date">2016年12月27日08:31 颜色分类：大中小三件套（不含花）</span>
                            </div>
                        </div>
                        <div class="allevaluate-item">
                            <i><img src="../images/details_icon2.jpg" alt=""></i>
                            <div class="describe">
                                <p class="netname">么***周</p>
                                <p>花瓶超级棒，我看图以为是光面的，收货发现是磨砂，但感觉也超有质感，很喜欢。磨砂上面还有点纹路，不过觉得挺自然的，不影响美观。包装也很好，绝对不会磕碎碰坏，好评！</p>
                                <span class="date">2016年12月27日08:31 颜色分类：大中小三件套（不含花）</span>
                            </div>
                        </div>
                        <div class="allevaluate-item">
                            <i><img src="../images/details_icon1.jpg" alt=""></i>
                            <div class="describe">
                                <p class="netname">馨***呀</p>
                                <p>不好意思评价晚了，产品很好，价格比玻璃品便宜，没有我担心的杂色，发货快，包装号，全5分</p>
                                <div>
                                    <img src="../images/details_icon3.jpg" alt="">
                                    <img src="../images/details_icon4.jpg" alt="">
                                    <img src="../images/details_icon5.jpg" alt="">
                                    <img src="../images/details_icon6.jpg" alt="">
                                    <img src="../images/details_icon7.jpg" alt="">
                                </div>
                                <span class="date">2016年12月27日08:31 颜色分类：大中小三件套（不含花）</span>
                            </div>
                        </div>
                        <div class="allevaluate-item">
                            <i><img src="../images/details_icon2.jpg" alt=""></i>
                            <div class="describe">
                                <p class="netname">么***周</p>
                                <p>花瓶超级棒，我看图以为是光面的，收货发现是磨砂，但感觉也超有质感，很喜欢。磨砂上面还有点纹路，不过觉得挺自然的，不影响美观。包装也很好，绝对不会磕碎碰坏，好评！</p>
                                <span class="date">2016年12月27日08:31 颜色分类：大中小三件套（不含花）</span>
                            </div>
                        </div>
                        <div class="allevaluate-item">
                            <i><img src="../images/details_icon1.jpg" alt=""></i>
                            <div class="describe">
                                <p class="netname">馨***呀</p>
                                <p>不好意思评价晚了，产品很好，价格比玻璃品便宜，没有我担心的杂色，发货快，包装号，全5分</p>
                                <div>
                                    <img src="../images/details_icon3.jpg" alt="">
                                    <img src="../images/details_icon4.jpg" alt="">
                                    <img src="../images/details_icon5.jpg" alt="">
                                    <img src="../images/details_icon6.jpg" alt="">
                                    <img src="../images/details_icon7.jpg" alt="">
                                </div>
                                <span class="date">2016年12月27日08:31 颜色分类：大中小三件套（不含花）</span>
                            </div>
                        </div>
                        <div class="allevaluate-item">
                            <i><img src="../images/details_icon2.jpg" alt=""></i>
                            <div class="describe">
                                <p class="netname">么***周</p>
                                <p>花瓶超级棒，我看图以为是光面的，收货发现是磨砂，但感觉也超有质感，很喜欢。磨砂上面还有点纹路，不过觉得挺自然的，不影响美观。包装也很好，绝对不会磕碎碰坏，好评！</p>
                                <span class="date">2016年12月27日08:31 颜色分类：大中小三件套（不含花）</span>
                            </div>
                        </div>
                        <div class="allevaluate-item">
                            <i><img src="../images/details_icon1.jpg" alt=""></i>
                            <div class="describe">
                                <p class="netname">馨***呀</p>
                                <p>不好意思评价晚了，产品很好，价格比玻璃品便宜，没有我担心的杂色，发货快，包装号，全5分</p>
                                <div>
                                    <img src="../images/details_icon3.jpg" alt="">
                                    <img src="../images/details_icon4.jpg" alt="">
                                    <img src="../images/details_icon5.jpg" alt="">
                                    <img src="../images/details_icon6.jpg" alt="">
                                    <img src="../images/details_icon7.jpg" alt="">
                                </div>
                                <span class="date">2016年12月27日08:31 颜色分类：大中小三件套（不含花）</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="scn-right">
                <button>为你推荐</button>
                <a href="order-page.html">
                    <div class="rec-item">
                        <img src="../images/details_asd_img1.jpg" alt="">
                        <p>【最家】复古文艺风玻璃花瓶</p>
                        <span>￥193.20</span>
                    </div>
                </a>
                <a href="order-page.html">
                    <div class="rec-item">
                        <img src="../images/details_asd_img2.jpg" alt="">
                        <p>【最家】复古文艺风玻璃花瓶</p>
                        <span>￥193.20</span>
                    </div>
                </a>
                <a href="order-page.html">
                    <div class="rec-item">
                        <img src="../images/details_asd_img3.jpg" alt="">
                        <p>【最家】复古文艺风玻璃花瓶</p>
                        <span>￥193.20</span>
                    </div>
                </a>
                <a href="order-page.html">
                    <div class="rec-item">
                        <img src="../images/details_asd_img4.jpg" alt="">
                        <p>【最家】复古文艺风玻璃花瓶</p>
                        <span>￥193.20</span>
                    </div>
                </a>
            </div>
        </section>
        <!-- 猜你喜欢 -->
        <div class="section">
            <p>猜你喜欢</p>
            <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <div class="imglist">
                            <div class="item">
                                <img src="../images/details_list_img1.jpg" alt="">
                                <p>【最家】复古文艺风玻璃花瓶</p>
                                <span>￥688.00</span>
                            </div>
                            <div class="item">
                                <img src="../images/details_list_img2.jpg" alt="">
                                <p>【最家】复古文艺风玻璃花瓶</p>
                                <span>￥688.00</span>
                            </div>
                            <div class="item">
                                <img src="../images/details_list_img3.jpg" alt="">
                                <p>【最家】复古文艺风玻璃花瓶</p>
                                <span>￥688.00</span>
                            </div>
                            <div class="item">
                                <img src="../images/details_list_img4.jpg" alt="">
                                <p>【最家】复古文艺风玻璃花瓶</p>
                                <span>￥688.00</span>
                            </div>
                            <div class="item">
                                <img src="../images/details_list_img5.jpg" alt="">
                                <p>【最家】复古文艺风玻璃花瓶</p>
                                <span>￥688.00</span>
                            </div>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <div class="imglist">
                            <div class="item">
                                <img src="../images/details_list_img5.jpg" alt="">
                                <p>【最家】复古文艺风玻璃花瓶</p>
                                <span>￥688.00</span>
                            </div>
                            <div class="item">
                                <img src="../images/details_list_img4.jpg" alt="">
                                <p>【最家】复古文艺风玻璃花瓶</p>
                                <span>￥688.00</span>
                            </div>
                            <div class="item">
                                <img src="../images/details_list_img3.jpg" alt="">
                                <p>【最家】复古文艺风玻璃花瓶</p>
                                <span>￥688.00</span>
                            </div>
                            <div class="item">
                                <img src="../images/details_list_img2.jpg" alt="">
                                <p>【最家】复古文艺风玻璃花瓶</p>
                                <span>￥688.00</span>
                            </div>
                            <div class="item">
                                <img src="../images/details_list_img1.jpg" alt="">
                                <p>【最家】复古文艺风玻璃花瓶</p>
                                <span>￥688.00</span>
                            </div>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <div class="imglist">
                            <div class="item">
                                <img src="../images/details_list_img1.jpg" alt="">
                                <p>【最家】复古文艺风玻璃花瓶</p>
                                <span>￥688.00</span>
                            </div>
                            <div class="item">
                                <img src="../images/details_list_img3.jpg" alt="">
                                <p>【最家】复古文艺风玻璃花瓶</p>
                                <span>￥688.00</span>
                            </div>
                            <div class="item">
                                <img src="../images/details_list_img5.jpg" alt="">
                                <p>【最家】复古文艺风玻璃花瓶</p>
                                <span>￥688.00</span>
                            </div>
                            <div class="item">
                                <img src="../images/details_list_img4.jpg" alt="">
                                <p>【最家】复古文艺风玻璃花瓶</p>
                                <span>￥688.00</span>
                            </div>
                            <div class="item">
                                <img src="../images/details_list_img2.jpg" alt="">
                                <p>【最家】复古文艺风玻璃花瓶</p>
                                <span>￥688.00</span>
                            </div>
                        </div>
                    </div>
                </div>
                <button class="carousel-control-prev" type="button" data-target="#carouselExampleControls"
                    data-slide="prev">
                    <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="%23000"
                        class="bi bi-chevron-left" viewBox="0 0 16 16">
                        <path fill-rule="evenodd"
                            d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z" />
                    </svg>
                    <span class="sr-only">Previous</span>
                </button>
                <button class="carousel-control-next" type="button" data-target="#carouselExampleControls"
                    data-slide="next">
                    <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="%23000"
                        class="bi bi-chevron-right" viewBox="0 0 16 16">
                        <path fill-rule="evenodd"
                            d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z" />
                    </svg>
                    <span class="sr-only">Next</span>
                </button>
            </div>
        </div>
    </main>
    <!-- 底部footer布局 -->
    <footer>
        <section>
            <ul>
                <li>
                    <i>7</i>
                    <a href="#">七天无理由退货</a>
                </li>
                <li>
                    <i>15</i>
                    <a href="#">15天免费换货</a>
                </li>
                <li>
                    <i>邮</i>
                    <a href="#">满599包邮</a>
                </li>
                <li>
                    <i>服</i>
                    <a href="#">手机特色服务</a>
                </li>
            </ul>
        </section>
        <div class="footer">
            <p>蜗牛家居©2019-2021公司版权所有 京ICP备080100-xx号</p>
            <p>违法和不良信息举报电话：400-800-8200，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p>
        </div>
    </footer>
</body>

</html>